<template>
  <div class="main">
    <div>
      <van-nav-bar
        title="可借阅数"
        fixed
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
      />
    </div>
    <div class="content">
      <van-cell-group inset>
        <van-cell name="num" title="总借阅数" :value="data.num" size="large" />
      </van-cell-group>
      <van-cell-group inset style="margin-top: 3px">
        <van-cell
          name="used"
          :value="data.used"
          title="已借阅数"
          size="large"
        />
      </van-cell-group>
      <van-cell-group inset style="margin-top: 3px">
        <van-cell
          name="leave"
          :value="data.leave"
          title="剩余借阅数"
          size="large"
        />
      </van-cell-group>
    </div>
    <van-tabbar v-model="active">
      <van-tabbar-item replace to="/main" icon="wap-home-o"
        >首页</van-tabbar-item
      >
      <van-tabbar-item replace to="/borrow" icon="new-o">借书</van-tabbar-item>
      <van-tabbar-item replace to="/history" icon="records"
        >历史借阅</van-tabbar-item
      >
      <van-tabbar-item replace to="/personal" icon="user-circle-o"
        >个人中心</van-tabbar-item
      >
    </van-tabbar>
  </div>
</template>

<script>
import { getByUsername } from "@/api/api";
export default {
  data() {
    return {
      active: 3,
      data: {
        num: "3",
        used: "1",
        leave: "2",
      },
    };
  },
  methods: {
    onClickLeft() {
      history.back();
    },
  },
  created() {
    getByUsername({ username: localStorage.getItem("username") }).then(
      (res) => {
        this.data = res;
        this.data.leave = res.num - res.used;
      }
    );
  },
};
</script>

<style>
.main {
  background-color: antiquewhite;
  width: 100%;
  height: 100%;
  position: fixed;
}
.content {
  margin-top: 15%;
}
</style>
